.metrics-aggregate-section {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 4px 0;

	.metrics-time-aggregation-section {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.non-histogram-container {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	&:not(.is-histogram) {
		.metrics-time-aggregation-section,
		.metrics-space-aggregation-section {
			display: flex;
			flex-direction: row;
			align-items: center;

			.metrics-aggregation-section-content {
				flex-wrap: nowrap;
			}
		}
	}

	.metrics-space-aggregation-section {
		display: flex;
		flex-direction: column;
		gap: 4px;

		.metrics-space-aggregation-section-title {
			display: flex;
			align-items: center;
			gap: 6px;

			color: var(--Slate-50, #62687c);
			font-family: 'Geist Mono';
			font-size: 12px;
			font-style: normal;
			font-weight: 500;
			line-height: 18px; /* 150% */
			letter-spacing: 0.48px;
		}
	}

	.metrics-aggregation-section-content {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 8px;

		.group-by-filter-container {
			min-width: 340px !important;
		}

		.metrics-aggregation-section-content-item {
			display: flex;
			align-items: center;
			gap: 10px;

			.metrics-aggregation-section-content-item-label {
				color: var(--Vanilla-400, #c0c1c3);
				font-family: 'Geist Mono';
				font-size: 13px;
				font-style: normal;
				font-weight: 400;
				line-height: 20px; /* 142.857% */
				letter-spacing: -0.07px;

				&.main-label {
					color: var(--Slate-50, #62687c);
					font-family: 'Geist Mono';
					font-size: 12px;
					font-style: normal;
					font-weight: 500;
					line-height: 18px; /* 150% */
					letter-spacing: 0.48px;
					display: flex;
					align-items: center;
					gap: 6px;
				}
			}

			.metrics-aggregation-section-content-item-value {
				min-width: 140px;

				.ant-select {
					width: 100%;
				}

				.ant-select-selector {
					border-radius: 2px;
					border: 1.005px solid var(--Slate-400, #1d212d);
					background: var(--Ink-300, #16181d);
				}

				.input-with-label {
					.label {
						min-width: 80px;
					}

					.input {
						flex: initial;
						width: 100px !important;
					}
				}
			}
		}
	}

	&.is-histogram {
		.group-by-filter-container {
			width: 420px;
		}

		.histogram-every-input {
			.input {
				flex: initial;
				width: 100px !important;
			}

			.label {
				min-width: 80px;
			}
		}
	}
}

.metrics-operators-select {
	border-radius: 2px;
	border: 1.005px solid var(--Slate-400, #1d212d);
	background: var(--Ink-300, #16181d);

	color: var(--Vanilla-400, #c0c1c3);
	font-family: 'Geist Mono';
	font-size: 13px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px; /* 142.857% */
	letter-spacing: -0.07px;
}

.lightMode {
	.metrics-aggregate-section {
		.metrics-aggregation-section-content {
			.metrics-aggregation-section-content-item {
				.metrics-aggregation-section-content-item-label {
					color: var(--text-ink-200);

					&.main-label {
						color: var(--text-slate-100);
					}
				}

				.metrics-aggregation-section-content-item-value {
					.ant-select-selector {
						border: 1px solid var(--bg-vanilla-300) !important;
						background: var(--bg-vanilla-100) !important;
					}
				}
			}
		}
	}
	.metrics-operators-select {
		border: 1px solid var(--bg-vanilla-300) !important;
		background: var(--bg-vanilla-100) !important;
		color: var(--text-ink-100);
	}
}
